<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    ul {
        list-style: none;
        display: list-item;
        min-height:50px;
    }
    .actions-inline {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    ul li {
        float: left;
    }
</style>
<div class="form-group">
    <label for="category_id" class="col-sm-2 control-label">分类: </label>
    <div class="col-sm-5 list-inline">
        <input type="text" class="form-control" id="category_text" readonly/>
        <a href="javascript:void(0);" onclick="show_model()" class="btn btn-info">选择分类</a>
        <input type="hidden" name="category_id" id="category_id" value=""/>
    </div>
</div>
<!-- 模态框 -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">选择</h4>
            </div>
            <div class="modal-body">
                <div class="row cmds">
                    <div class="col-sm-12 actions-inline">
                        <span class="label label-success">一级分类</span>
                        <ul class="actions" style="border-bottom: 1px solid #e5e5e5; border-radius: 5px;" id="cate_1_ul">
                            
                        </ul>
                    </div>
                    <div class="col-sm-12 actions-inline" id="my_modal_div">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    var categories                  = {
        1:'水果',
        2: '蔬菜',
        3: '肉类',
        4: '坚果',
        5: '海鲜',
        6: '卤味',
        7: '白菜',
        8: '玉米',
        9: '猪肉',
        10:'牛肉',
        11:'罗非鱼',
        12:'鲩鱼',
        13:'花生',
        14:'卤鸭',
        15:'卤花生',
        16:'苹果',
        17:'梨',
        18:'橘子',
        19:'西瓜',
        20:'水晶梨',
        21:'鸭梨',
        23:'进口罗非鱼',
        24:'国产罗非鱼',
        25:'咸卤花生',
        26:'辣卤花生',
        27:'小苹果',
        28:'红富士',
        29:'甜橘子',
        30:'酸橘子',
    };
    var categories_tree = {};
    categories_tree     = {
        1:{15:{25:{},26:{}},16:{27:{},28:{}},17:{20:{},21:{}},18:{29:{},30:{}}},
        2:{6:{},7:{}},
        3:{12:{}},
        4:{10:{},11:{23:{},24:{}}},
        5:{14:{}},
    };
    var categories_1    = {
        1:{'name':'水果', 'category_id':1},
        2:{'name':'蔬菜', 'category_id':2},
        3:{'name':'肉类', 'category_id':3},
        4:{'name':'坚果', 'category_id':4},
        5:{'name':'海鲜', 'category_id':5},
        6:{'name':'卤味', 'category_id':6},
    };
    var step_tree       = categories_tree;
    for(k in categories_1) {
        $('#cate_1_ul').append('<li><button class="btn btn-default" onclick="show_categories(' + categories_1[k]['category_id'] + ', this, 1)">' + categories_1[k]['name'] + '</button></li>');
    }

    function show_model() {
        $('#cate_1_ul').find('button').each(function () {
            $(this).attr('class', 'btn btn-default');
            $(this).removeAttr('disabled');
        });
        step_tree = categories_tree;
        $('#my_modal_div').empty();
        $('#myModal').modal();
    }
    var stree       = {};
    var pre_step    = 1;
    var step_text   = {};
    step_text[1]    = '一';
    step_text[2]    = '二';
    step_text[3]    = '三';
    step_text[4]    = '四';
    step_text[5]    = '五';
    step_text[6]    = '六';
    step_text[7]    = '七';
    step_text[8]    = '八';
    step_text[9]    = '九';
    step_text[10]   = '十';
    function show_categories(val, t, tab) {
        step        = tab + 1;
        if(pre_step - tab >= 0 && tab != 1) {
            step_tree = stree[tab];
        } else if(tab == 1) {
            step_tree = categories_tree;
        }
        console.log(step_tree);
        stree[tab]  = step_tree;
        $(t).parent('li').parent('ul').find('button').each(function () {
            $(this).attr('class', 'btn btn-default');
            $(this).removeAttr('disabled');
        });
        $(t).attr('class', 'btn btn-info');
        $(t).attr('disabled', true);
        var obj_len = 0;
        for(k in step_tree[val]) {
            obj_len++;
        }
        if(!step_tree[val] || obj_len == 0) {
            $('#category_id').val(val);
            $('#category_text').val(categories[val]);
            $('#myModal').modal('hide');
        } else {
            if(tab == 1) {
                $('#my_modal_div').empty();
            } else {
                $(t).parent('li').parent('ul').nextAll().remove();
            }
            var list = step_tree[val];
            var str = '<span class="label label-success">' + step_text[step] + '级分类</span><ul class="actions" style="border-bottom: 1px solid #e5e5e5; border-radius: 5px;">';
            for(k in list) {
                str += '<li><button class="btn btn-default" onclick="show_categories(' + k + ',this, ' + step + ')">' + categories[k] + '</button></li>';
            }
            str += '</ul>';
            $('#my_modal_div').append(str);
        }
        if(tab == 1) {
            step_tree = categories_tree[val];
        } else {
            step_tree = step_tree[val];
        }
        pre_step = tab;
    }
</script>